/**
* 基础菜单 用户管理
*/
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>C端用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="formInline.nickName"
          placeholder="用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button size="small" @click="showAddClient">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="$store.state.loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="uid" label="账户" width="150">
      </el-table-column>
      <el-table-column sortable prop="nickName" label="名称" width="150">
      </el-table-column>
      <el-table-column
        sortable
        prop="usePlatforms"
        label="授权第三方平台"
        width="250"
      >
        <template slot-scope="scope">
          <el-tag
            style="margin: 0 10px"
            v-for="p in scope.row.usePlatforms"
            :key="p"
            >{{ platforms[p] }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确认要删除吗？"
            @confirm="deleteUser(scope.$index, scope.row)"
            class="mg-left-10"
          >
            <el-button slot="reference" size="mini" plain type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="userForm.id ? '修改用户' : '添加用户'"
      :visible.sync="editFormVisible"
      width="60%"
    >
      <el-form ref="form" :model="userForm" label-width="120px">
        <el-form-item label="账号">
          <el-input
            v-model="userForm.uid"
            placeholder="邮箱或手机号等"
            :disabled="!!userForm.id"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码"> 默认c123456 </el-form-item>
        <el-form-item label="授权第三方平台">
          <el-checkbox-group v-model="userForm.usePlatforms">
            <el-checkbox label="aligenie">天猫精灵</el-checkbox>
            <el-checkbox label="dueros">小度</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="userForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="绑定设备" :visible.sync="bindDeviceVisible" width="50%">
      <div class="mg-bottom-10">
        <el-button size="mini" @click="toShowDeviceSelector">添加</el-button>
      </div>
      <DeviceSelector
        v-if="showDeviceSelector"
        :showDeviceId="true"
        @deviceSelected="onDeviceSelected"
      ></DeviceSelector>
      <el-table
        size="small"
        :data="bindDevices"
        highlight-current-row
        v-loading="$store.state.loading"
        border
        element-loading-text="拼命加载中"
      >
        <el-table-column sortable prop="deviceId" label="设备ID" width="250">
        </el-table-column>
        <el-table-column sortable prop="name" label="设备名" width="250">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDelBind(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="mg-top-20">
        <el-button size="small" type="primary" @click="submitBindDevice"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetClientUsers,
  ClientUserAdd,
  ClientUserSave,
  AliDeviceBindSave,
  AliBindDevices,
  DeleteClientUser,
} from "@/api/userApi";
import DeviceSelector from "@/views/device/DeviceSelector.vue";
export default {
  data() {
    return {
      loading: false,
      editFormVisible: false,
      bindDeviceVisible: false,
      formInline: {},
      userForm: {
        uid: "",
        nickName: "",
        usePlatforms: [],
      },
      listData: [],
      bindDevices: [],
      currUid: "",
      showDeviceSelector: false,
      platforms: { aligenie: "天猫精灵", dueros: "小度" },
    };
  },
  components: {
    DeviceSelector,
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata(parameter) {
      GetClientUsers(parameter).then((res) => {
        this.listData = res;
      });
    },
    getBindDevices() {},
    handleEdit: function (idx, row) {
      this.editFormVisible = true;
      this.userForm = row;
    },
    handleBindDevice: function (idx, row) {
      this.showDeviceSelector = false;
      this.bindDeviceVisible = true;
      this.currUid = row.id;
      AliBindDevices(this.currUid).then((res) => {
        this.bindDevices = res;
      });
    },
    toShowDeviceSelector: function () {
      this.showDeviceSelector = true;
    },
    onDeviceSelected: function (device) {
      this.bindDevices.push({
        deviceId: device.id,
        name: device.productName + device.id.substring(device.id.length - 2),
      });
    },
    handleDelBind: function (idx) {
      this.bindDevices.splice(idx, 1);
    },
    submitBindDevice: function () {
      AliDeviceBindSave(this.currUid, this.bindDevices).then(() => {
        this.$notify({
          title: "成功",
          message: "设置成功",
          type: "success",
        });
        this.bindDeviceVisible = false;
      });
    },
    search() {
      this.getdata(this.formInline);
    },
    showAddClient() {
      this.editFormVisible = true;
    },
    closeDialog() {
      this.editFormVisible = false;
    },
    onSubmit() {
      if (this.userForm.id) {
        ClientUserSave(this.userForm).then(() => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
          });
          this.search();
          this.editFormVisible = false;
        });
      } else {
        ClientUserAdd(this.userForm).then(() => {
          this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success",
          });
          this.search();
          this.editFormVisible = false;
        });
      }
    },
    deleteUser(idx, row) {
      DeleteClientUser(row.id).then(() => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        });
        this.search();
      });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>
